<template>
  <div class="content">
    <a-table :dataSource="dataSource" :columns="columns">
      <template #bodyCell="{ column }">
        <template v-if="column.key === 'operation'">
          <a-space>
            <a-button type="primary">查看</a-button>
            <a-button @click="toEdit">编辑</a-button>
          </a-space>
        </template>
      </template>
    </a-table>

    <a-drawer
      v-model:open="open"
      title="编辑知识"
      width="1200"
      :closable="false"
      :footer-style="{ textAlign: 'right' }"
      @close="onClose"
    >
      <a-form
        :model="formState"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item label="问题" name="question">
          <a-input v-model:value="formState.question" />
        </a-form-item>
        <a-form-item label="答案" name="answer">
          <MarkdownEditor v-model="formState.answer" />
        </a-form-item>
      </a-form>

      <template #footer>
        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
        <a-button type="primary" @click="onClose">确定</a-button>
      </template>
    </a-drawer>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import MarkdownEditor from "./components/md.vue";

const markdownContent = ref("# Hello, Markdown!");

const dataSource = ref(
  Array.from({ length: 20 }, () => {
    return {
      question: "问题",
      answer: "答案",
    };
  })
);
const columns = ref([
  { title: "问题", dataIndex: "question", key: "question", width: 150 },
  { title: "答案", dataIndex: "answer", key: "answer" },
  {
    title: "操作",
    key: "operation",
    fixed: "right",
    width: 100,
  },
]);
const open = ref(false);
function toEdit() {
  open.value = true;
}
function onClose() {
  open.value = false;
}

const formState = reactive({
  question: "问题",
  answer: "# Hello, Markdown!",
});

onMounted(() => {
  getPageList();
});

const getPageList = (page = 1, size = 10) => {};
</script>
<style lang="scss" scoped>
.content {
  margin: 32px;
}
</style>
